<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>专题管理</title>
</head>
<body>
<div layout:fragment="content">
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/promotion/topic/index/}" id="link_return" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
    <div class="row">&nbsp;</div>
	<!-- BEGIN CONTAINER -->
    <div class="portlet box blue" id="form_wizard_1">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i> 专题添加- <span class="step-title">
                第二步</span>
            </div>
        </div>
        <div class="portlet-body form">
            <form th:action="@{/promotion/topic/updateContent}" class="form-horizontal" id="form_topic_edit" method="POST">
                <input type="hidden" id="hidden_id" th:field="*{topic.id}" />
                <input type="hidden" id="hidden_step" th:field="*{topic.step}" />
                <div class="form-wizard">
                    <div class="form-body">
                        <ul id="category" class="nav nav-pills nav-justified steps">
                            <li>
                                <a href="#tab1" data-toggle="tab" class="step">
                                <span class="number">
                                1 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>通用信息</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="#tab2" data-toggle="tab" class="step">
                                <span class="number">
                                2 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>内容</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab3" data-toggle="tab" class="step active">
                                <span class="number">
                                3 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>专题模块</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab4" data-toggle="tab" class="step">
                                <span class="number">
                                4 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>设置商品</span>
                                </a>
                            </li>
                        </ul>
                        <div id="bar" class="progress progress-striped" role="progressbar">
                            <div class="progress-bar progress-bar-success" style="width: 50%;">
                            </div>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane" id="tab2">
                                <div class="form-group">
							        <label class="control-label col-md-1">内容</label>
                                    <div class="col-md-11">
                                        <input th:field="*{topic.content}" id="textarea_content" rows="4" type="text" class="form-control" placeholder="内容" />
                                    </div>
						        </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="button_group" class="col-md-offset-3 col-md-9">
                                    <a id="btn_prev" href="javascript:;" class="btn green button-previous">
                                    <i class="m-icon-swapleft"></i>上一步</a>
                                    <a id="btn_next" href="javascript:;" class="btn blue button-next">
                                    下一步<i class="m-icon-swapright m-icon-white"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script th:inline="javascript">
    /*<![CDATA[*/

        KindEditor.ready(function(K) {
            editor = K.create('#textarea_content', {
                    width:"95%",
                    height:"300px",
                    uploadJson : '/upload/TOPICIMAGE',
                    allowFileManager : false,
                    filterMode:false
             });
            editor.clickToolbar('multiimage',function(){
		    	   if($.browser.mozilla){
		    		   editor.hideDialog();
		    		   alert('请使用谷歌或者IE浏览器进行多文件的上传，火狐浏览器暂不支持!');
		    		   return false;
		    	   }
		       });
        });

    $(document).ready(function(){
    	if($.browser.mozilla){
			Metronic.alert({'message':'<span style="color:red;">请使用谷歌或者IE浏览器进行多文件的上传，火狐浏览器暂不支持!</span>'});
		}

        $("#category li a").each(function () {

            $(this).bind("click", function () {
                var step = $(this).children(".number").text().trim();
                $("#hidden_step").val(step);
                document.forms[0].submit();
            });

        });

        $("#tab2").show();

        $("#btn_next").bind("click",function(){
            $("#hidden_step").val("3");
            editor.sync();
            document.forms[0].submit();
        });
        $("#btn_prev").bind("click",function(){
            $("#hidden_step").val("1");
            editor.sync();
            document.forms[0].submit();
        });
    });
    /*]]>*/
</script>